<template>
    <div class="order">
        <VHeader title="我要点单"/>
        <div>
            <div class="flex flex-space-around title">
                <div v-for="item in $route.query.selectedName" :key="item" v-text="item"/>
            </div>
        </div>
        <van-list
                v-if="list.length > 0"
                v-model="loading"
                :finished="finished"
                @load="getList"
        >
            <div class="card" v-for="item in list" :key="item.diandanId">
                <div class="card-title"><img src="" width="20" />{{item.title}}</div>
                <div>服务机构：{{item.organization}}</div>
                <div>服务方式：{{item.type}}</div>
                <div class="flex flex-space-between"><div>联系人：{{item.contactName}}</div><div>联系电话：{{item.contactMobile}}</div></div>
                <div>联系地址：{{item.workPlace}}</div>
                <div class="flex flex-end buttons">
                    <router-link :to="{path: '/myOrder/detail', query: {...$route.query, id: item.diandanId}}"><button class="detail">查看详情</button></router-link>
                    <a :href="'tel:'+item.contactMobile"><button class="call">拨打电话</button></a>
                    <router-link :to="{path: '/myOrder/form', query: {...$route.query, id: item.diandanId}}"><button class="order">我要点单</button></router-link>
                </div>
            </div>
        </van-list>
        <div v-else class="flex flex-center flex-align-center no-more">
            <div>
                <img src="../../../static/img/no_data.png" width="150" />
                <p>没有更多数据</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                selectedCode: [],
                selectedName: [],
                selectedIndex: 0,
                page: 1,
                loading: false,
                finished: false,
            }
        },
        methods: {
            async getList() {
                this.loading = true;
                try {
                    let list = await this.$http({
                        page: this.page++,
                        method: 'api.diandan.getList',
                        categoryId: this.$route.query.categoryId,
                        village: Array.from(this.$route.query.selectedCode).pop(),
                    })
                    if(list.data.list.length <= 0){
                        this.finished = true;
                    }
                    this.list = this.list.concat(list.data.list);
                }catch (e) {
                
                }
                this.loading = false;
            }
        },
        async mounted() {
            await this.getList()
        }
    }
</script>
<style lang="scss" scoped>
    .title {
        padding: 0.3rem 0;
        font-size: 150%;
        color: #F65D5D;
    }
    .no-more {
        text-align:center;
        margin-top: 50px;
    }
    .card {
        margin: 20px;
        padding: 15px;
        background-color: #EFEFEF;
        border-radius: 5px;
        div {
            padding: 4px 0;
        }
        .card-title {
            background: url('../../../static/img/order/circle.png') no-repeat left center transparent;
            background-size: 16px 16px;
            padding-left: 25px;
            font-size: 110%;
            line-height: 30px;
        }
        .buttons {
            padding: 0.2rem 0;
            button {
                border-radius: 4px;
                margin: 0 5px;
                padding: 0.1rem 0.2rem;
                font-size: 120%;
                color:#FFFFFF;
                border:0;
            }
            .detail {
                background-color: #F65D5D;
            }
            .call {
                background-color: #FFA518;
            }
            .order {
                background-color: #378EEF;
            }
        }
    }
</style>